<template>
  <div class="pie" id="pie-cockpit"></div>
</template>

<script>
import * as echarts from 'echarts';
import json from './theme';

export default {
  name: 'Pie',
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          // {
          //   name: '类型1',
          //   value: 40,
          //   percent: 40
          // },
          // {
          //   name: '类型2',
          //   value: 30,
          //   percent: 30
          // },
          // {
          //   name: '类型3',
          //   value: 10,
          //   percent: 20
          // },
          // {
          //   name: '类型4',
          //   value: 10,
          //   percent: 10
          // },
          // {
          //   name: '类型5',
          //   value: 10,
          //   percent: 10
          // }
        ];
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const chartDom = document.getElementById('pie-cockpit');
      echarts.registerTheme('dark', json);
      const myChart = echarts.init(chartDom, 'dark');

      const option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          // top: '0%',
          // left: '5%',
          // right: '5%',
          // bottom: '0%'
        },
        legend: {
          right: '8%',
          orient: 'vertical',
          // icon: 'circle',
          top: 'middle',
          itemGap: 20,
          textStyle: {
            color: '#fff'
          }
        },
        darkMode: true,
        series: [
          {
            name: '情感走向',
            type: 'pie',
            radius: ['30%', '75%'],
            avoidLabelOverlap: false,
            top: '0%',
            left: '0%',
            bottom: '0%',
            right: '25%',
            // height: '90%',
            label: {
              position: 'inside',
              color: '#fff',
              formatter(v) {
                console.log(v.data.percent);
                return `${v.data.percent}%`;
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      };

      option && myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
